@use './variables.scss' as *;

/**
 * 全局明亮模式主题样式
 * 优先级低于组件 scoped 样式，允许组件自定义覆盖
 * 主要用于设置 Element Plus 组件的默认明亮主题
 */

/**
 * Element Plus 明亮模式 CSS 变量
 */
:root {
  // Element Plus 主色调 - 使用项目主色调
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-3: #{$primary-color-light};
  --el-color-primary-light-5: #A8B5FD;
  --el-color-primary-light-7: #C5CDFE;
  --el-color-primary-light-8: #D4DBFE;
  --el-color-primary-light-9: #E9ECFF;
  --el-color-primary-dark-2: #{$primary-color-dark};

  // 成功色
  --el-color-success: #{$success-color};
  --el-color-success-light-3: #95D475;
  --el-color-success-light-5: #B3E19D;
  --el-color-success-light-7: #D1EDC4;
  --el-color-success-light-8: #E1F3D8;
  --el-color-success-light-9: #F0F9EB;
  --el-color-success-dark-2: #{$success-color-active};

  // 警告色
  --el-color-warning: #{$warning-color};
  --el-color-warning-light-3: #EEBC69;
  --el-color-warning-light-5: #F3C87A;
  --el-color-warning-light-7: #F8D9B5;
  --el-color-warning-light-8: #FAE6CA;
  --el-color-warning-light-9: #FDF6EC;
  --el-color-warning-dark-2: #{$warning-color-active};

  // 危险色
  --el-color-danger: #{$danger-color};
  --el-color-danger-light-3: #F89898;
  --el-color-danger-light-5: #FAB6B6;
  --el-color-danger-light-7: #FCD3D3;
  --el-color-danger-light-8: #FDE2E2;
  --el-color-danger-light-9: #FEF0F0;
  --el-color-danger-dark-2: #{$danger-color-active};

  // 信息色
  --el-color-info: #{$info-color};
  --el-color-info-light-3: #B1B3B8;
  --el-color-info-light-5: #C8C9CC;
  --el-color-info-light-7: #DEDFE0;
  --el-color-info-light-8: #E9E9EB;
  --el-color-info-light-9: #F4F4F5;
  --el-color-info-dark-2: #{$info-color-active};

  // 背景色
  --el-bg-color: #{$bg-color-white};
  --el-bg-color-page: #{$bg-color-light};
  --el-bg-color-overlay: #{$bg-color-white};

  // 文本色
  --el-text-color-primary: #{$text-color-primary};
  --el-text-color-regular: #{$text-color-secondary};
  --el-text-color-secondary: #{$text-color-muted};
  --el-text-color-placeholder: #{$text-color-placeholder};
  --el-text-color-disabled: #{$text-color-disabled};

  // 边框色
  --el-border-color: #{$border-color-base};
  --el-border-color-light: #{$border-color-light};
  --el-border-color-lighter: #{$border-color-lighter};
  --el-border-color-extra-light: #f2f2f2;

  // 填充色
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: transparent;

  // 遮罩层颜色
  --el-overlay-color: rgba(0, 0, 0, 0.5);
  --el-overlay-color-light: rgba(0, 0, 0, 0.3);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.1);

  // 盒子阴影
  --el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --el-box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  --el-box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
  --el-box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.12);

  // 禁用状态
  --el-disabled-bg-color: #f5f7fa;
  --el-disabled-text-color: #{$text-color-disabled};
  --el-disabled-border-color: #{$border-color-light};

  color-scheme: light;
}

/**
 * 全局明亮模式样式
 * 不使用 !important，优先级低于组件 scoped 样式
 */

// 全局背景色
body {
  background-color: #{$bg-color-light};
  color: #{$text-color-primary};
}

// 按钮组件
.el-button {
  &--default {
    background-color: #ffffff;
    border-color: #{$border-color-base};
    color: #{$text-color-primary};

    &:hover {
      background-color: #{$hover-bg-light};
      border-color: #{$primary-color};
      color: #{$primary-color};
    }

    &:active {
      background-color: #e6e8eb;
    }
  }

  &--text {
    color: #{$text-color-primary};

    &:hover {
      background-color: #{$hover-bg-light};
    }
  }
}

// 表单组件（Input, Textarea）
.el-input__wrapper,
.el-textarea__inner {
  background-color: #ffffff;
  border-color: #{$border-color-base};
  box-shadow: 0 0 0 1px #{$border-color-base} inset;

  &:hover {
    box-shadow: 0 0 0 1px #{$border-color-light} inset;
  }
}

.el-input__inner,
.el-textarea__inner {
  color: #{$text-color-primary};

  &::placeholder {
    color: #{$text-color-placeholder};
  }
}

.el-input.is-disabled .el-input__wrapper {
  background-color: #f5f7fa;
}

// 表格组件
.el-table {
  --el-table-bg-color: #ffffff;
  --el-table-tr-bg-color: #ffffff;
  --el-table-header-bg-color: #{$bg-color-gray};
  --el-table-row-hover-bg-color: #{$hover-bg-light};
  --el-table-border-color: #{$border-color-light};

  th.el-table__cell {
    background-color: #{$bg-color-gray};
    color: #{$text-color-primary};
  }

  td.el-table__cell {
    border-color: #{$border-color-lighter};
  }

  .el-table__body tr:hover > td {
    background-color: #{$hover-bg-light};
  }
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

// 下拉菜单和弹出层
.el-popper,
.el-select-dropdown,
.el-picker-panel,
.el-dropdown-menu {
  background-color: #ffffff;
  border-color: #{$border-color-light};
}

.el-select-dropdown__item,
.el-dropdown-menu__item {
  color: #{$text-color-primary};

  &:hover {
    background-color: #{$hover-bg-light};
  }

  &.is-selected {
    color: #{$primary-color};
  }
}

.el-picker-panel__content {
  color: #{$text-color-primary};
}

.el-date-table td.available:hover {
  color: #{$primary-color};
}

.el-date-table td.current:not(.disabled) span {
  background-color: #{$primary-color};
}

// 对话框和抽屉
.el-dialog,
.el-drawer {
  background-color: #ffffff;

  .el-dialog__header,
  .el-drawer__header {
    color: #{$text-color-primary};
    border-color: #{$border-color-lighter};
  }

  .el-dialog__body,
  .el-drawer__body {
    color: #{$text-color-primary};
  }

  .el-dialog__footer {
    border-color: #{$border-color-lighter};
  }
}

.el-dialog__headerbtn .el-dialog__close,
.el-drawer__close-btn {
  color: #{$text-color-secondary};

  &:hover {
    color: #{$primary-color};
  }
}

// 卡片组件
.el-card {
  background-color: #ffffff;
  border-color: #{$border-color-light};

  .el-card__header {
    border-color: #{$border-color-lighter};
    color: #{$text-color-primary};
  }

  .el-card__body {
    color: #{$text-color-primary};
  }
}

// 分页组件
.el-pagination {
  .el-pagination__total,
  .el-pagination__jump {
    color: #{$text-color-secondary};
  }

  .el-pager li {
    background-color: #ffffff;
    color: #{$text-color-primary};

    &:hover {
      color: #{$primary-color};
    }

    &.is-active {
      background-color: #{$primary-color};
      color: #ffffff;
    }
  }

  .btn-prev,
  .btn-next {
    background-color: #ffffff;
    color: #{$text-color-primary};

    &:hover {
      color: #{$primary-color};
    }
  }
}

// 消息提示
// .el-message,
// .el-notification {
//   background-color: #ffffff;
//   border-color: #{$border-color-light};

//   .el-message__content,
//   .el-notification__content {
//     color: #{$text-color-primary};
//   }
// }

// 菜单组件
.el-menu {
  background-color: #ffffff;
  border-color: #{$border-color-light};

  .el-menu-item,
  .el-sub-menu__title {
    color: #{$text-color-primary};

    &:hover {
      background-color: #{$hover-bg-light};
    }

    &.is-active {
      color: #{$primary-color};
    }
  }
}

// 标签页组件
.el-tabs {
  .el-tabs__header {
    border-color: #{$border-color-light};
  }

  .el-tabs__nav-wrap::after {
    background-color: #{$border-color-light};
  }

  .el-tabs__item {
    color: #{$text-color-secondary};

    &:hover {
      color: #{$primary-color};
    }

    &.is-active {
      color: #{$primary-color};
    }
  }

  .el-tabs__active-bar {
    background-color: #{$primary-color};
  }
}

// 开关组件
.el-switch {
  .el-switch__core {
    border-color: #{$border-color-base};
    background-color: #{$border-color-base};
  }

  &.is-checked .el-switch__core {
    border-color: #{$primary-color};
    background-color: #{$primary-color};
  }
}

// Loading 加载组件
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

.el-loading-spinner {
  .el-loading-text {
    color: #{$text-color-primary};
  }

  .path {
    stroke: #{$primary-color};
  }
}

// 表单组件
.el-form {
  .el-form-item__label {
    color: #{$text-color-primary};
  }

  .el-form-item__error {
    color: #{$danger-color};
  }
}

// Checkbox 和 Radio
.el-checkbox__label,
.el-radio__label {
  color: #{$text-color-primary};
}

.el-checkbox__inner,
.el-radio__inner {
  background-color: #ffffff;
  border-color: #{$border-color-base};
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: #{$primary-color};
  border-color: #{$primary-color};
}

// Collapse 折叠面板
.el-collapse {
  border-color: #{$border-color-light};
}

.el-collapse-item__header {
  background-color: #ffffff;
  color: #{$text-color-primary};
  border-color: #{$border-color-lighter};
}

.el-collapse-item__content {
  background-color: #ffffff;
  color: #{$text-color-primary};
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;

  &:hover {
    background-color: #a8a8a8;
  }
}

.el-scrollbar__thumb {
  background-color: #c1c1c1;
}

// Tree 树形组件
.el-tree {
  background-color: transparent;

  .el-tree-node__content {
    color: #{$text-color-primary};

    &:hover {
      background-color: #{$hover-bg-light};
    }
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #{$active-bg-primary};
  }
}

// Upload 上传组件
.el-upload {
  border-color: #{$border-color-base};

  &:hover {
    border-color: #{$primary-color};
  }
}

.el-upload-dragger {
  background-color: #ffffff;
  border-color: #{$border-color-base};

  &:hover {
    border-color: #{$primary-color};
  }

  .el-upload__text {
    color: #{$text-color-primary};
  }
}

.el-upload-list__item {
  background-color: #ffffff;
  border-color: #{$border-color-lighter};
  color: #{$text-color-primary};
}

// Tooltip 文字提示
.el-tooltip__popper {
  background-color: #{$text-color-primary};
  color: #ffffff;
}

// Popover 弹出框
.el-popover {
  background-color: #ffffff;
  border-color: #{$border-color-light};
  color: #{$text-color-primary};
}

// Breadcrumb 面包屑
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #{$text-color-secondary};

    &:hover {
      color: #{$primary-color};
    }
  }

  &:last-child .el-breadcrumb__inner {
    color: #{$text-color-primary};
  }
}

.el-breadcrumb__separator {
  color: #{$text-color-placeholder};
}

// Tag 标签
.el-tag {
  &--light {
    background-color: #f5f7fa;
    border-color: #{$border-color-lighter};
  }
}

// Progress 进度条
.el-progress__text {
  color: #{$text-color-primary};
}

// Alert 提示
.el-alert {
  background-color: #f5f7fa;
  border-color: #{$border-color-light};

  .el-alert__title,
  .el-alert__description {
    color: #{$text-color-primary};
  }
}

// Steps 步骤条
.el-steps {
  .el-step__title {
    color: #{$text-color-primary};
  }

  .el-step__description {
    color: #{$text-color-secondary};
  }

  .el-step__head.is-process {
    color: #{$primary-color};
    border-color: #{$primary-color};
  }
}

// Slider 滑块
.el-slider__runway {
  background-color: #{$border-color-lighter};
}

.el-slider__bar {
  background-color: #{$primary-color};
}

// Transfer 穿梭框
.el-transfer {
  .el-transfer-panel {
    background-color: #ffffff;
    border-color: #{$border-color-light};

    .el-transfer-panel__header {
      background-color: #{$bg-color-gray};
      border-color: #{$border-color-lighter};
      color: #{$text-color-primary};
    }

    .el-transfer-panel__body {
      color: #{$text-color-primary};
    }
  }
}

// Calendar 日历
.el-calendar {
  .el-calendar__header {
    border-color: #{$border-color-light};
  }

  .el-calendar__title {
    color: #{$text-color-primary};
  }

  .el-calendar-table {
    thead th {
      color: #{$text-color-primary};
    }

    .el-calendar-day {
      color: #{$text-color-primary};
    }
  }
}

// Descriptions 描述列表
.el-descriptions {
  .el-descriptions__header {
    .el-descriptions__title {
      color: #{$text-color-primary};
    }
  }

  .el-descriptions__label {
    color: #{$text-color-secondary};
  }

  .el-descriptions__content {
    color: #{$text-color-primary};
  }
}

// Result 结果
.el-result {
  .el-result__title {
    color: #{$text-color-primary};
  }

  .el-result__subtitle {
    color: #{$text-color-secondary};
  }
}
